<template>
  <el-dialog title="方案管理" v-model="tbVisible" width="800">
    <el-table :data="planStore.plans" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column
        prop="name"
        label="方案名称"
        width="140"
        align="center"
      />
      <el-table-column prop="w" label="自重比载(kg/m)" align="center" />
      <el-table-column prop="H" label="水平张力(kN)" align="center" />
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small" @click="delPlan(scope.row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import usePlanStore from "@/states/usePlanStore";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";

const tbVisible = defineModel();
const planStore = usePlanStore();

const route = useRoute();
async function delPlan(row: PlanModel) {
  await ElMessageBox.confirm(`是否删除"${row.name}"?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await planStore.del(row.id);
      ElMessage({
        type: "success",
        message: "成功删除",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });

  await planStore.all({ id: +route.params.id });
}
</script>

<style></style>
